<template>
    <div>
        <div class="px-35px bg-#3f3f3f overflow-hidden">
            <div class="form-item">
                <div class="label">
                    昵称
                </div>
                <nut-input v-model="formData.nickname">
                    <template #right>
                        <img src="../../../assets/pen.webp" alt="" class="w-13px">
                    </template>
                </nut-input>
            </div>
            <div class="form-item">
                <div class="label">
                    性别
                </div>
                <nut-radio-group v-model="formData.sex" direction="horizontal">
                    <nut-radio :label="1">
                        男
                    </nut-radio>
                    <nut-radio :label="2">
                        女
                    </nut-radio>
                    <nut-radio :label="0">
                        不指定
                    </nut-radio>
                </nut-radio-group>
            </div>
            <div class="form-item">
                <div class="label">
                    注册邮箱
                </div>
                <nut-input v-model="formData.email" class="!bg-transparent !border-none email-input">
                    <template #right>
                        <span class="text-#72a1fd underline">发送验证码</span>
                    </template>
                </nut-input>
                <div></div>
                <div class="error-message">
                    *未验证的邮箱无法找回密码请及时验证
                </div>
            </div>

            <nut-button class="!w-full bg-#ffffff !text-#000 font-bold !mt-150px !mb-20px" @click="saveInfo">
                存储变更
            </nut-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { TriangleDown } from '@nutui/icons-vue'
import { ref, watch } from 'vue'
import { useUserStore } from '@/store/user'
import { axiosService } from '@/http/sever'
const userStore = useUserStore()

const formData = ref(JSON.parse(JSON.stringify(userStore.userInfo)))
console.log(' userStore.userInfo -->', userStore.userInfo)


const saveInfo = () => {
    axiosService.post('/api/User/userUpdateInfo', formData.value).then(async res => {
        console.log('res -->', res)
        await userStore.getUserInfo()
        formData.value = JSON.parse(JSON.stringify(userStore.userInfo))
    }).catch(err => {
        console.log('err -->', err)
    })
}
</script>

<style scoped lang="scss">
.item-icon {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 3px;

    &.icon4 {
        background: url('../../../assets/user-4.png') no-repeat center;
        background-size: contain;
    }
}

.form-item {
    margin: 20px 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;

    .label {
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }



    :deep(.nut-radio) {
        margin-bottom: 0 !important;

        .nut-radio__label {
            color: #fff;
        }

        .nut-radio__icon {
            color: #e557c5;
        }
    }

    .error-message {
        color: #ff7979;
        font-size: 9px;
    }
}

.nut-input {
    border-radius: 99px;
    padding: 7px 12px;

    :deep(input) {
        color: black;
    }
}

.email-input {
    :deep(input) {
        color: #bfbfbf;
    }
}
</style>
